<template>
  <!-- modelValue:{{ modelValue }} -->
  <!-- $attrs: {{ $attrs }} -->
  <q-input @focus="handlefocus" @blur="showClearButton = false" :model-value="modelValue" :type="type"
    @update:model-value="处理up" dense :style="`max-width: ${a最宽值}px;`" :disable="disable">
    <template v-slot:before>
      <!-- {{ `MaxWidth: ${a最宽值} px` }} -->
      <span class="text-primary">{{ title }}:</span>
    </template>

    <template v-slot:append>
      <q-icon v-if="showClearButton" name="close" class="cursor-pointer" @click="清除" />
    </template>
  </q-input>
</template>

<script setup>
import { ref, toRefs, getCurrentInstance, onMounted, watch } from 'vue';
const showClearButton = ref(false)

const 内容 = ref('')
onMounted(() => {
  // 内容.value = props.modelValue
})
const props = defineProps({
  modelValue: null,
  title: null,
  type: {
    default: 'Number'
  },
  disable: {
    default: false
  },
  a最宽值: {
    default: 250
  },
})

function handlefocus() {
  showClearButton.value = props.modelValue !== '';
}

function 处理up(e) {
  // 当输入框内容改变时，检查是否需要显示清除按钮
  // console.log('e :>> ', e);
  emit('update:modelValue', e)

}

watch(() => props.modelValue, (newValue, oldValue) => {
  showClearButton.value = props.modelValue !== '';
  // if (!props.modelValue) {
  //   showClearButton.value = false
  // }
})

const emit = defineEmits(['update:modelValue'])

function 清除() {
  // console.log(`self.attrs.modelValue👉`,self.attrs.modelValue)
  // self.attrs.modelValue=''
  // onUpdate:modelValue
  // 被拦截了，下层组件就收不到了
  emit('update:modelValue', '')
}

</script>

<style scoped>
.q-input__append-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>
